<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="约车列表"
    ></van-nav-bar>

    <!-- 列表 -->

    <van-tabs v-model="active1">
      <van-tab title="我要约车">
        <div class="search-criteria">
          <van-cell-group>
            <van-field
              v-model="monicker"
              label="请输入驾校"
              placeholder="请输入驾校"
            />

            <div v-if="conceal" class="watch-list">
              <div
                v-for="(item, index) in list"
                :key="index"
                @click="pitchOn(item.id, item.name)"
              >
                {{ item.name }}
              </div>
            </div>

            <van-field
              v-model="instructor"
              label="请输入教练"
              placeholder="请输入教练"
            />
          </van-cell-group>
          <div class="finger-tip">
            <div @click="queryCondition">查询更多</div>
            <div @click="confirm">确定</div>
          </div>
        </div>

        <!-- 弹出层 -->
        <van-popup v-model="showHide" position="top" :style="{ height: '60%' }">
          <div class="search-criteria">
            <van-cell-group>
              <van-field
                v-model="monicker"
                label="请输入驾校"
                placeholder="请输入驾校"
              />

              <div v-if="conceal" class="watch-list">
                <div
                  v-for="(item, index) in list"
                  :key="index"
                  @click="pitchOn(item.id, item.name)"
                >
                  {{ item.name }}
                </div>
              </div>

              <van-field
                v-model="instructor"
                label="请输入教练"
                placeholder="请输入教练"
              />
            </van-cell-group>

            <!-- 车型 -->
            <!-- <div style="background:#fff;" class="ce_basic">
              <p>准驾车型</p>
              <select v-model="VehicleModel" class="ce_type">
                <option value>不限</option>
                <option
                  v-for="(item, index) in type"
                  :key="index"
                  :value="item.dictValue"
                  >{{ item.remarks }}</option
                >
              </select>
            </div> -->
            <!-- 性别 -->
            <div class="ce_basic">
              <p>性别</p>
              <select v-model="set" class="ce_type">
                <option value>不限</option>
                <option value="0">男</option>
                <option value="1">女</option>
              </select>
            </div>

            <!-- 年龄段 -->
            <div class="ce_basic">
              <p>年龄段</p>
              <select v-model="age" class="ce_type">
                <option value>不限</option>
                <option value1="20">20~30</option>
                <option value1="30">30~40</option>
                <option value1="40">40~50</option>
                <option value1="50">50~60</option>
              </select>
            </div>

            <!-- 起始日期和结束日期 -->

            <van-cell is-link @click="showTime">
              <div class="showTime">
                <div>起始时间</div>
                <p>{{ startTime }}</p>
              </div>
            </van-cell>
            <van-popup
              round
              v-model="showtime"
              position="bottom"
              :style="{ height: '40%' }"
            >
              <van-datetime-picker
                v-model="currentDate"
                @confirm="startAffirm"
                @cancel="startCcancel"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
              />
            </van-popup>

            <van-cell is-link @click="hideTime">
              <div class="showTime">
                <div>结束时间</div>
                <p>{{ endTime }}</p>
              </div>
            </van-cell>
            <van-popup
              round
              v-model="endtime"
              position="bottom"
              :style="{ height: '40%' }"
            >
              <van-datetime-picker
                v-model="endcurrentDate"
                @confirm="endAffirm"
                @cancel="endCcancel"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
              />
            </van-popup>

            <!-- end -->

            <!-- 年龄段 -->
            <div class="ce_basic">
              <p>教龄段</p>
              <select v-model="schoolAge" class="ce_type">
                <option value>不限</option>
                <option value="0">0~3</option>
                <option value="3">3~5</option>
                <option value="5">5~10</option>
                <option value="10">10以上</option>
              </select>
            </div>

            <div class="finger-tip">
              <div @click="confirm">确定</div>
            </div>
          </div>
        </van-popup>

        <van-tabs v-model="active">
          <van-tab title="科目二">
            <div
              v-for="(item, index) in twoSubjects"
              :key="index"
              class="two-subjects"
            >
              <img @click="showPopup(item.drillId)" :src="item.photo" alt />
              <div @click="showPopup(item.drillId)">{{ item.name }}</div>
              <div @click="showPopup(item.drillId)">{{ item.cx }}</div>
              <div @click="href('/stipulatedList', item.drillId, item.cx)">
                课程详情
              </div>
              <img
                @click="callPhone(item.phone)"
                src="../../../assets/images/dianhua.png"
                alt
              />
            </div>
          </van-tab>
          <van-tab title="科目三">
            <div
              v-for="(item, index) in ThreeSubjects"
              :key="index"
              class="two-subjects"
            >
              <img @click="showPopup(item.drillId)" :src="item.photo" alt />
              <div @click="showPopup(item.drillId)">{{ item.name }}</div>
              <div @click="showPopup(item.drillId)">{{ item.cx }}</div>
              <div @click="href('/stipulatedList', item.drillId, item.cx)">
                班型详情
              </div>
              <img
                @click="callPhone(item.phone)"
                src="../../../assets/images/dianhua.png"
                alt
              />
            </div>
          </van-tab>
        </van-tabs>
        <van-popup :style="{ width: '100%' }" v-model="show">
          <div class="coreddetails">
            <img :src="CoachDetail.photo" alt />
            <van-cell-group class="th-cell-group">
              <van-cell title="姓名" :value="CoachDetail.name" />
              <van-cell title="性别" :value="sex" />
              <div class="templent">
                <p>星级</p>
                <van-rate
                  v-model="CoachDetail.xj"
                  :size="20"
                  readonly
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                />
              </div>
              <van-cell title="联系电话" :value="CoachDetail.phone" />
              <van-cell title="所属驾校" :value="CoachDetail.inscodename" />
              <div class="templent">
                <p>驾校地址</p>
                <div>{{ CoachDetail.address }}</div>
              </div>
              <van-cell title="平均分" :value="CoachDetail.xj" />
              <van-cell title="服务" :value="CoachDetail.fwzl" />
              <van-cell title="技术" :value="CoachDetail.jljs" />
              <van-cell title="简介" :value="CoachDetail.jljj" />
            </van-cell-group>
            <div @click="buttom" class="button-switch">确定</div>
          </div>
        </van-popup>
      </van-tab>
      <van-tab title="智能约车">
        <intelligent />
      </van-tab>
    </van-tabs>

    <div class="reminder">学车当天最多预约4个小时</div>
  </div>
</template>

<script>
import {
  ThreeSubjects,
  DoubleCounting,
  VehicleModel,
  ConfirmDache,
  basicInformation
} from "../../../assets/js/api/user";
import intelligent from "./intelligent";
import { CoachDetail, globalSSearch } from "../../../assets/js/api/apply";
import { baseURL } from "../../../assets/js/config";
import { Toast } from "vant";
export default {
  name: "TaxiHailing",
  data() {
    return {
      active1: 0,
      active: 0,
      twoSubjects: [],
      ThreeSubjects: [],
      genre: "", // 报考的类型
      show: false,
      // value: ,
      CoachDetail: {}, // 教练详情
      sex: "", // 性别
      list: [], // 模糊查询驾校列表
      instructor: "", // 教练名
      monicker: "", // 驾校名
      conceal: true, // 当需要输入驾校名称时显示
      id: "", // 驾校id
      age: "", // 年龄段
      schoolAge: "", // 教龄段
      startTime: "", //开始时间
      endTime: "", // 结束时间
      set: "", // 性别
      showHide: false, // 查询更多显示隐藏
      showtime: false, // x4选择其实时间的显示隐藏
      endtime: false, // 结束时间
      minDate: new Date(2020, 8, 9),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      endcurrentDate: new Date(),
      VehicleModel: "", // 车型
      type: [], // 车型下拉框
      record: 0 // 用来记录搜索驾校师傅已经点击过
    };
  },

  watch: {
    monicker() {
      if (this.monicker == "") {
        this.conceal = false;
        // this.record = 0;
        return;
      }

      if (this.record == 0) {
        this.conceal = true;
      } else {
        this.conceal = false;
      }
      let obj = {
        type: "1",
        keyWord: this.monicker
      };
      globalSSearch(obj).then(res => {
        // console.log(res);
        this.list = res.data;
        // this.港澳台身份证 = true;
      });
    }
  },

  mounted() {
    this.baseURL = baseURL;

    VehicleModel().then(res => {
      // console.log(res);
      if (res.code == 0) {
        this.type = res.data;
      }
    });

    basicInformation().then(res => {
      // console.log(res);
      this.VehicleModel = res.data.zjcx;
      // this.monicker = res.data.jxname;
      // this.id = res.data.jgbh;
      // this.conceal = false;
    });

    DoubleCounting().then(res => {
      // console.log(res);
      this.genre = res.data.bmcx;
      // console.log(this.genre);
    });

    ThreeSubjects().then(res => {
      // console.log(res);
      for (let i = 0; i < res.data.length; i++) {
        // console.log(res.data[i].kemu.length);
        if (res.data[i].km == "2") {
          this.twoSubjects.push(res.data[i]);
          // console.log(this.twoSubjects);
        }
        if (res.data[i].km == "3") {
          this.ThreeSubjects.push(res.data[i]);
        }
      }
      // console.log(this.twoSubjects);
      // console.log(this.ThreeSubjects);
    });
  },

  methods: {
    // 点击确认
    startAffirm() {
      var myDate = this.currentDate;
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = myDate.getDate(); //获取当前日(1-31)
      // let hour = myDate.getHours();
      // let minute = myDate.getMinutes();
      if (month < 10) {
        month = `0${month}`;
        // console.log(month);
      }
      // if (minute < 10) {
      //   minute = `0${minute}`;
      // }
      // if (hour < 10) {
      //   hour = `0${hour}`;
      // }
      if (day < 10) {
        day = `0${day}`;
        // console.log(day);
      }
      //  ${hour}:${minute}
      this.startTime = `${year}-${month}-${day}`;

      this.showtime = false;
    },
    startCcancel() {
      this.showtime = false;
    },

    // 截止时间
    endAffirm() {
      var myDate = this.endcurrentDate;
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      // let hour = myDate.getHours();
      // let minute = myDate.getMinutes();

      let day = myDate.getDate(); //获取当前日(1-31)
      if (month < 10) {
        month = `0${month}`;
        // console.log(month);
      }
      if (day < 10) {
        day = `0${day}`;
        // console.log(day);
      }
      // if (hour < 10) {
      //   hour = `0${hour}`;
      // }
      // if (minute < 10) {
      //   minute = `0${minute}`;
      // }
      this.endTime = `${year}-${month}-${day}`;
      //  ${hour}:${minute}

      this.endtime = false;
    },
    endCcancel() {
      this.endtime = false;
    },
    // end

    // 起始时间
    showTime() {
      this.showtime = true;
    },
    // 截止时间
    hideTime() {
      this.endtime = true;
    },

    // 查询更多
    queryCondition() {
      this.showHide = true;
    },

    pitchOn(id, name) {
      this.record = 1;
      this.id = id;
      this.monicker = name;
      this.conceal = false;
    },

    // 筛选条件
    confirm() {
      this.showHide = false;
      // console.log(this.monicker);
      if (this.monicker == "") {
        this.id = "";
        // console.log("驾校空");
      }
      let obj = {
        jgbh: this.id,
        ji: this.schoolAge, // 教龄段
        age: this.age, // 年龄段
        beginDate: this.startTime, // 开始时间段
        endDate: this.endTime, // 结束时间段
        sex: this.set, // 性别
        drillname: this.instructor, // 教练名称
        cx: this.VehicleModel // 车型
      };

      console.log(obj);

      this.twoSubjects = [];
      this.ThreeSubjects = [];
      ConfirmDache(obj).then(res => {
        console.log(res);
        // console.log(res.data.length);
        if (res.data.length == 0) {
          Toast("未查询到有关教练或该教练的有关课程");
        }
        for (let i = 0; i < res.data.length; i++) {
          // console.log(res.data[i].kemu.length);
          if (res.data[i].km == "2") {
            this.twoSubjects.push(res.data[i]);
          }
          if (res.data[i].km == "3") {
            this.ThreeSubjects.push(res.data[i]);
          }
        }
      });
    },

    showPopup(id) {
      CoachDetail(id).then(res => {
        this.CoachDetail = {};
        this.CoachDetail = res.data;
        if (this.CoachDetail.sex === "0") {
          this.sex = "男";
        } else if (this.CoachDetail.sex === "1") {
          this.sex = "女";
        }
      });
      this.show = true;
    },
    callPhone(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
      // console.log(this.Phone);
    },
    buttom() {
      this.show = false;
    },
    href(url, id, type) {
      // console.log(this.genre, type);
      if (this.genre === type) {
        this.$router.push({ path: `${url}/${id}` });
      } else {
        Toast("您只能预约您报名的车型!");
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  components: { intelligent },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  }
};
</script>

<style></style>
